<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header/>
        <div class="content Gwidth">
            <div class="goods">
                <div class="left">
                    <div class="top">
                        <ImgZoom  :width="670"  :height="458" minIMGsrc="https://img.alicdn.com/imgextra/i2/2183295419/O1CN01awKYlS1ptwv0tbmL5_!!0-item_pic.jpg_430x430q90.jpg" :scale="2" />
                    </div>
                    <div class="bottom">
                        <div v-swiper:mySwiper2="swiperGoods">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" @mouseenter="mouseenter(0)">
                                    <div class="img" :class="{active:active==0}">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide" @mouseenter="mouseenter(1)">
                                    <div class="img" :class="{active:active==1}">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide" @mouseenter="mouseenter(2)">
                                    <div class="img" :class="{active:active==2}">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide" @mouseenter="mouseenter(3)">
                                    <div class="img" :class="{active:active==3}">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                </div>
                                <div class="swiper-slide" @mouseenter="mouseenter(4)">
                                    <div class="img" :class="{active:active==4}">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="top">
                        <h1>精品老板椅沙发椅办公椅沙发</h1>
                        <div class="type">型号:HIK-45952</div>
                        <div class="material">
                            <span style="color: #333333;width:80px">材质</span>
                            <span>实木；红木；等等</span>
                        </div>
                        <div class="size">
                            <span style="color: #333333;width:80px">尺寸</span>
                            <span>宽1900*高630（mm）</span>
                        </div>
                        <div class="time">
                            <span style="color: #333333;width:80px">定制周期</span>
                            <span>15天</span>
                        </div>
                        <div class="colors">
                            <span style="color: #333333;width:80px">定制颜色</span>
                            <div class="color">
                                <span :style="{backgroundColor:'#F30213'}"></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <Button type="error" @click="door_to_door_ruler=true">预约上门量尺</Button>
                        <div class="tel">
                            139-4680-4568
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods_cont">
                <div class="left">
                    <div class="factory">
                        <div class="logo">
                            <img src="" alt="">
                        </div>
                        <div class="name">凯威家具简称</div>
                        <div class="number">
                            <span>已有</span>
                            <strong>4563</strong>
                            <span>人预约</span>
                        </div>
                        <div class="favorablerate">
                            <span>好评率</span>
                            <strong>100%</strong>
                        </div>
                        <div class="btn">
                            <Button type="error" @click="free_show=true">免费设计</Button>
                        </div>
                        <div class="topage">
                            <nuxt-link to="/factory">进入公司主页</nuxt-link>
                        </div>
                    </div>
                    <div class="hot">
                        <div class="hot_title">
                            热门推荐
                        </div>
                        <div class="hot_cont">
                            <div class="item">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <h2>精品老板椅沙发椅</h2>
                                <div class="colors">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <h2>精品老板椅沙发椅</h2>
                                <div class="colors">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right_title">
                        产品详情
                    </div>
                    <div class="right_cont"></div>
                </div>
            </div>
        </div>
        <!-- 上门尺量弹窗 -->
		<DoorToDoorRuler :is_show="door_to_door_ruler" @onClose="onCloseRuler"/>
        <!-- 免费设计 -->
		<FreeDesign :is_show="free_show" @onClose="onCloseFree" />
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
import ImgZoom from "~/components/ImgZoom.vue";
import DoorToDoorRuler from "~/components/DoorToDoor_ruler.vue"
import FreeDesign from "~/components/Free_design.vue"
export default {
    components: {
		Header,
		Sidebar,
        ImgZoom,
        DoorToDoorRuler,
        FreeDesign
	},
    data(){
        return{
            active:0,
            door_to_door_ruler:false,//是否展示上门尺量弹窗
            free_show:false,//是否展示免费设计弹窗
            swiperGoods:{
                slidesPerView : 5,
                spaceBetween : 18,
                // loop : true,
                controller: {
                    control: 'mySwiper',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            }
            
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        
    },
    methods:{
        // 切换商品
        mouseenter(e){
            this.active = e
        },
        onCloseRuler(){
			this.door_to_door_ruler = false
		},
        onCloseFree(){
			this.free_show = false
		},
    },
}
</script>
<style scoped>
    .content .goods{
        padding-top: 30px;
        display: flex;
        /* align-items: center; */
        justify-content: space-between;
    }
    .content .goods .left{
        width: 670px;
    }
    .content .goods .right{
        width: 432px;
        display:flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .content .goods .right .top,.content .goods .right .bottom{
        width: 100%;
    }
    .content .goods .left .bottom{
        margin-top: 20px;
    }
    .content .goods .left .bottom .img.active{
        border-bottom: 2px solid #F30213;
    }
    .content .goods .left .bottom img{
        width: 100%;
        height: 84px;
    }
    .content .goods .right h1{
        font-size: 30px;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
    }
    .content .goods .right .type,.content .goods .right .material,.content .goods .right .size,.content .goods .right .colors,.content .goods .right .time{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        padding: 25px 0;
        border-bottom: 1px solid #eeeeee;
    }
    .content .goods .right span{
        display: inline-block;
        color: #666666;
    }
    .content .goods .right .colors{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .content .goods .right .colors .color{
        font-size: 0;
    }
    .content .goods .right .colors .color span{
        width: 38px;
        height: 38px;
        margin-right: 20px;
        border-radius: 50%;
        border: 1px solid #cccccc;
    }
    .content .goods .right .bottom{
        display: flex;
        align-items: center;
        /* margin-top: 110px; */
    }
    .content .goods .right .bottom button{
        width: 170px;
        height: 44px;
        border-radius: 4px;
        background: #F30213;
    }
    .content .goods .right .bottom .tel{
        background: url(~/static/image/ico/tel.png)left center no-repeat;
        background-size: 17px 18px;
        padding-left: 24px;
        margin-left: 20px;
    }
    .content>>>.swiper-button-prev:after,.content>>>.swiper-button-next:after{
        content: '';
    }
    .content>>>.swiper-button-prev,.content>>>.swiper-button-next{
        width: 50px;
        height: 50px;
        background: url(~/static/image/ico/prev.png)center center no-repeat;
        background-size: 50px;
    }
    .content>>>.swiper-button-next{
        background: url(~/static/image/ico/next.png)center center no-repeat;
        background-size: 50px;
    }
    .content .goods_cont{
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
    }
    .content .goods_cont .left{
        width: 300px;
    }
    .content .goods_cont .right{
        width:calc(100% - 338px);
    }
    .content .goods_cont .left .factory{
        width: 100%;
        height: 400px;
        text-align: center;
        border: 1px solid #EEEEEE;
        padding: 40px 20px 35px 20px;
    }
    .content .goods_cont .left .factory .logo,.content .goods_cont .left .factory .logo img{
        width: 100px;
        height: 100px;
        border-radius: 5px;
        margin: 0 auto;
    }
    .content .goods_cont .left .factory .name{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        margin-top:15px;
    }
    .content .goods_cont .left .factory .number{
        margin-top:15px;
        margin-bottom: 10px;
    }
    .content .goods_cont .left .factory .number span,.content .goods_cont .left .factory .favorablerate span{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }
    .content .goods_cont .left .factory .btn button{
        width: 120px;
        height: 44px;
        background: #F30213;
        border-radius: 6px;
        margin-top: 30px;
    }
    .content .goods_cont .left .factory .topage{
        margin-top: 30px;
    }
    .content .goods_cont .left .factory .topage a{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }
    .content .goods_cont .hot{
        margin-top: 50px;
    }
    .content .goods_cont .hot .hot_title{
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 20px;
        border-bottom: 1px solid #eeeeee;
    }
    .content .goods_cont .hot .hot_cont .item{
        width: 275px;
        padding: 30px 0;
        border-bottom: 1px solid #eeeeee;
    }
    .content .goods_cont .hot .hot_cont .item:last-child{
        border-bottom: 0;
    }
    .content .goods_cont .hot .hot_cont .item .img,.content .goods_cont .hot .hot_cont .item img{
        width: 100%;
        height: 210px;
    }
    .content .goods_cont .hot .hot_cont .item h2{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-top: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .content .goods_cont .hot .hot_cont .item .colors span{
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid #CCCCCC;
        border-radius: 50%;
    }
    .right_title{
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 22px;
        border-bottom: 1px solid #eeeeee;
    }
</style>
